// 左中右 grail 布局
.flexlayout-grail(@left: @layout-left, @right: @layout-right, @gap: @layout-gap, @padding: @layout-content-padding) {
  overflow: auto;
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  padding: @padding;
  .left {
    flex: 0 0 @left;
    margin-right: @gap;
  }
  .right {
    flex: 0 0 @right;
    margin-left: @gap;
  }
  .main {
    flex: 1;
  }
}


.layout-grail(@left: @layout-left, @right: @layout-right, @gap: @layout-gap, @padding: @layout-content-padding) {
  width: 100%;
  height: 100%;
  padding: @padding;
  .clearfix();
  .left {
    height: 100%;
    width: @left;
    margin-right: @gap;
    float: left;
  }
  .right {
    height: 100%;
    width: @right;
    margin-left: @gap;
    float: right;
  }
  .main {
    height: 100%;
    width: calc(~"100% - " (@left + @right + @gap * 2));
    float: left;
  }
}


// 左右布局
.flexlayout(@left: @layout-left, @gap: @layout-gap, @padding: @layout-content-padding) {
  overflow: auto;
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  padding: @padding;
  .left {
  flex: 0 0 @left;
  margin-right: @gap;
  }
  .main {
    flex: 1;
  }
}


.layout(@left: @layout-left, @gap: @layout-gap, @padding: @layout-content-padding) {
  width: 100%;
  height: 100%;
  padding: @padding;
  .clearfix();
  .left {
    height: 100%;
    width: @left;
    margin-right: @gap;
    float: left;
  }
  .main {
    height: 100%;
    width: calc(~"100% - " (@left + @gap));
    float: left;
  }
}


.make-row(@gutter: @grid-gutter-width) {
  position: relative;
  margin-left: (@gutter / -2);
  margin-right: (@gutter / -2);
  height: auto;
  .clearfix;
}

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-span@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-span@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(1); // kickstart it
}

.loop-grid-columns(@index, @class) when (@index > 0) {
  .col-span@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
  // .col@{class}-push-@{index} {
  //     left: percentage((@index / @grid-columns));
  // }
  // .col@{class}-pull-@{index} {
  //     right: percentage((@index / @grid-columns));
  // }
  .col@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
  // .col@{class}-order-@{index} {
  //     order: @index;
  // }
  .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@index, @class) when (@index = 0) {
  .col-span@{class}-@{index} {
    display: none;
  }
  .col@{class}-push-@{index} {
    left: auto;
  }
  .col@{class}-pull-@{index} {
    right: auto;
  }
}

.make-grid(@class: ~'') {
  .span {
      float: left;
      display: block;
    }
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class);
}